<template>
  <form class="page page-game24-decrypt">
    <h4 class="text-center">24点游戏求解</h4>
    <fieldset class="fieldset-content">
      <legend>参数设置</legend>
      <div class="alert alert-info" role="alert">
				<div>1、24点游戏是一种益智游戏，24点是把4个整数（一般是正整数）通过加减乘除以及括号运算，使最后的计算结果是24的一个数学游戏。</div>
				<div>2、24点计算器中能列举出所有的可能计算结果。</div>
			</div>
			<div class="form-group row align-items-center">
				<div class="col-2 text-right">输入数字</div>
				<div class="col-2"><input type="number" class="form-control" v-model.trim="numsList[0]"></div>
				<div class="col-2"><input type="number" class="form-control" v-model.trim="numsList[1]"></div>
				<div class="col-2"><input type="number" class="form-control" v-model.trim="numsList[2]"></div>
				<div class="col-2"><input type="number" class="form-control" v-model.trim="numsList[3]"></div>
				<div class="col-2"><button type="button" class="btn btn-secondary" @click="submitForm">计算</button></div>
			</div>
    </fieldset>
    <fieldset class="fieldset-content">
      <legend>计算结果</legend>
      <div class="row-flex" align="center">
        <div class="row-flex-main text-left">共 {{resultsList.length}} 个</div>
        <div class="row-flex-suffix">
          <button type="button" class="btn btn-link" @click="clearResultsList" title="清空">
            <i class="fa fa-trash-o"></i>
          </button>
        </div>
      </div>
      <div class="table-header" :style="thStyles">
        <table>
          <tbody>
            <tr>
              <th v-for="(v,i) in tableHeaders" :key="`th_${i}`" :style="{width: v.width}">{{v.label}}</th>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="table-body">
        <table ref="table">
          <tbody>
            <tr v-for="(v,i) in resultsList" :key="`res_${i}`">
              <template v-for="(item,index) in tableHeaders">
                <td :style="{width: item.width}" :key="`td_${i}_${index}`">
                  <span v-if="item.value==='order'">{{i + 1}}</span>
                  <span v-else-if="item.value==='content'">{{v}}</span>
                </td>
              </template>
            </tr>
            <tr v-if="resultsList.length===0" class="nodata-tr"><td>暂无结果</td></tr>
          </tbody>
        </table>
      </div>
    </fieldset>
  </form>
</template>

<script>
import calc24 from './calc24.js'

export default {
  name: 'game24-decrypt',
  data () {
    return {
      numsList: ['', '', '', ''],
      resultsList: [],
      tableHeaders: [
        {label: '序号', value: 'order', width: '4em'},
        {label: '内容', value: 'content', width: 'auto'},
      ],
      thStyles: {},
      loadingCount: 0
    }
  },
  methods: {
    checkScroll () {
      this.$nextTick(() => {
        if (!this.$refs.table) return
        let tableHeight = this.$refs.table.clientHeight
        let tableParentHeight = this.$refs.table.parentNode.clientHeight
        if (tableHeight > tableParentHeight) {
          this.thStyles = {overflow: 'hidden scroll'}
        } else {
          this.thStyles = {overflow: 'hidden'}
        }
      })
    },
    // 清空待处理文件
    clearResultsList () {
      this.numsList = ['', '', '', '']
      this.resultsList = []
      this.thStyles = {}
      this.loadingCount = 0
    },
    // 计算结果
    submitForm () {
      this.resultsList = []
      let numsList = this.numsList.map(v => (Number(v) || 0))
      this.resultsList = calc24(...numsList)
      if (this.resultsList.length === 0) {
        this.$toast('没得到结果！')
      }
    }
  }
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.page-game24-decrypt {
	display: flex;
	flex-direction: column;
  .row-flex-prefix {
    text-align: left;
  }
  fieldset {
    margin-top: 1em;
  }
	.fieldset-content {
    .table-header,
    .table-body {
      table {
        width: 100%;
        border: 1px solid @borderGrey;
        tr {height: 2em;}
        th, td {
          border: 1px solid @borderGrey;
          text-align: center;
          vertical-align: middle;
        }
        .nodata-tr {
          height: 100%;
          font-size: 16px;
          color: #999;
        }
      }
    }
    .table-body {
      height: calc(100% - 6.5em);
      overflow: auto;
      table {
        min-height: 100%;
      }
    }
    &:last-child {
      height: 0;
      flex-grow: 1;
    }
  }
}
</style>
